<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- bfc块级格式化上下文 一个独立的区域，里面的元素不会印象到外部元素 
1.内部的盒子会在垂直方向上一个接一个的放置
2.对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
3.每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
4.BFC的区域不会与float的元素区域重叠
5.计算BFC的高度时，浮动子元素也参与计算
6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然-->
<!-- 1.解决margin塌陷 2. 清除内部浮动，3.自适应多栏布局-->
        <div style="">
            <div style="border:1px solid red;width:100px;height:100px;margin-bottom:20px">111</div>
            <div style="">
               <p style="border:1px solid green;width:100px;height:100px;margin-top:20px"> 222</p></div>
        </div>
</body>
</html>